<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一个vue项目表单</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        window.onload = function () {
            var app = new Vue({
                //定义变量el和data
                el: '.box',

                data: {
                    username: "",
                    password1: "",
                    password2: "",
                    sex: "",
                    like: [],
                    city: "",
                    desc: "",

                },
                methods: {
                    register: function () {

                        alert(this.username + this.password1 + this.password2 + this.sex + this.like + this.city + this.desc)
                    },
                    checkusername: function () {
                        alert(this.username)
                    }
                }

            })
        }

    </script>
</head>
<body>

<div class="box">

    <table border="1">
        <tr>
            <td>用 户 名</td>
            <td><input type="text" v-model="username" @blur="checkusername"></td>
            <td>{{username}}</td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" v-model="password1"></td>
            <td>{{password1}}</td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password" v-model="password2"></td>
            <td>{{password2}}</td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                男<input type="radio" name="sex" value="boy" v-model="sex">
                女 <input type="radio" name="sex" value="girl" v-model="sex"></td>
            <td>{{sex}}</td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                足球 <input type="checkbox" name="like" value="足球" v-model="like">
                篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
                兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like">
            </td>
            <td>{{like}}</td>
        </tr>
        <tr>
            <td>所在城市</td>
            <td>
                <select name="city" v-model="city">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                    <option value="深圳">深圳</option>
                </select>
            </td>
            <td>{{city}}</td>
        </tr>
        <tr>
            <td>个人简介</td>
            <td><textarea name="desc" v-model="desc"></textarea></td>
            <td>{{desc}}</td>
        </tr>
    </table>
    <button @click="register">注册</button>
</div>

</body>
</html>